<template>
	<div id="store">
		<p class="Title">绑定店铺</p>
		<div class="store_title"><span>1</span>绑定店铺须知</div>
		<div class="store_1">
			<p>（1）当前账号最多可绑定<span>{{max_store_num}}</span>个店铺。</p>
			<p>（2）绑定完成后店铺不可修改信息，不可解绑店铺，绑定店铺过程中遇到问题，请联系在线客服QQ：<span>800856669</span></p>
		</div>
		<div class="store_title"><span>2</span>已绑定店铺</div>
		<table class="store_2" cellspacing="0">
			<tr>
				<th>店铺类型</th>
				<th>店铺名称</th>
				<th>店铺旺旺/咚咚</th>
				<th>店铺首页网址</th>
				<th>添加时间</th>
			</tr>
			<tr v-for="item in storeList">
				<td>{{getPlatfrom(item.platform)}}</td>
				<td>{{item.houseName}}</td>
				<td>{{item.remark}}</td>
				<td><a target="_blank" :href="item.houseUrl" >{{item.houseUrl}}</a></td>
				<td v-text="getDate(item.createtime)"></td>
			</tr>
		</table>
		<div class="store_title"><span>3</span>绑定新店铺<p v-show="isshow">您已绑定<span>{{store_num}}</span>个店铺，您还可以绑定<span>{{max_store_num - store_num}}</span>个店铺</p></div>
		<div v-if="store_show" class="store_3">
			<img @click="toAdd" src="../../static/img/store-01.png"/>
			<p>(您最多可绑定<span>{{max_store_num}}</span>个店铺，您还可以绑定<span>{{max_store_num - store_num}}</span>个店铺)</p>
		</div>
		<div v-else class="store_4">
			<div class="store_4_item">
				<p>店铺类型：</p>
				<ul class="type">
					<li @click="storeType = 1" :class="storeType == '1'?'type_active':''">淘宝</li>
					<li @click="storeType = 2" :class="storeType == '2'?'type_active':''">天猫</li>
					<li @click="storeType = 3" :class="storeType == '3'?'type_active':''">京东</li>
				</ul>
			</div>
			<div class="store_4_item">
				<p>店铺首页网址：</p>
				<input @keyup="isfocus = 0" :class="isfocus == '1'?'store_link focus':'store_link'" type="text" v-model="storeLink" />
			</div>
			<div class="store_4_item">
				<p>店铺名称：</p>
				<input @keyup="isfocus = 0" :class="isfocus == '2'?'store_name focus':'store_name'" type="text" v-model="storeName" />
			</div>
			<div class="store_4_item">
				<p v-text="storeType == '3'?'店铺咚咚：':'店铺旺旺：'"></p>
				<input @keyup="isfocus = 0" :class="isfocus == '3'?'store_service focus':'store_service'" type="text" v-model="storeService" />
			</div>
			<input @click="addStore" type="button" id="sub" value="确认绑定" v-show="falg"/>
		</div>
	</div>
</template>

<script>
export default{
	name: 'store',
	data: function(){
		return{
			falg:true,
			store_num: 0,//当前绑定店铺数量
			isshow: false,//显示隐藏参数
			isfocus: 0,//是否为空
			storeType: 1,//店铺类型
			storeLink: '',//店铺首页网址
			storeName: '',//店铺名称
			storeService: '',//店铺旺旺/咚咚
			storeList: [],//已绑店铺店铺列表
			store_show: true,//store_3,store_4显示隐藏
			max_store_num:1,//最大绑定店铺数量
		}
	},
	methods: {
		//---------前往绑定店铺-----------
		toAdd:function(){
			var _this = this;
			if(_this.max_store_num - _this.store_num <= '0'){
				_this.$confirm('购买店铺','店铺次数已用完!购买需198元，是否购买?',function(){
					_this.$axios.post('/agent/house/buyHouse').then(function(res){
						var data = res.data;
				    	if(data.message=='succ'){
				    		_this.$alert("1","购买成功")
				    		_this.getAgentMessage();
				    		_this.store_show = false;
							_this.isshow = true;
			    		}else if(data.message=="warning"){
			    			_this.$confirm("充值","你的余额不足，是否前往充值",function(){
			    				_this.$router.push({path:'/agent/recharge'});
			    			})
			    		}else{
			    			_this.$alert("2","购买失败");
			    		}
					})
				});
			}else{
				_this.store_show = false;
				_this.isshow = true;
			}
		},
		//-------确认绑定店铺------------
		addStore:function(){
			var _this = this;
			_this.falg = false;
			if(!$.trim(this.storeLink)){
				this.isfocus = 1;
				_this.falg = true;
				$('.store_link').focus();
			}else 
			if(!$.trim(this.storeName)){
				this.isfocus = 2;
				_this.falg = true;
				$('.store_name').focus();
			}else 
			if(!$.trim(this.storeService)){
				this.isfocus = 3;
				_this.falg = true;
				$('.store_service').focus();
			}else{
				var postData = _this.$qs.stringify({
					houseName: _this.storeName,
			    	platform:_this.storeType,
			    	houseUrl:_this.storeLink,
			    	remark:_this.storeService,
				});
				_this.$axios.post('/agent/house/addHouse',postData).then(function(res){
			    	if(res.data.message=='succ'){
			    		_this.$alert("1","添加成功",function(){
			    			_this.getAgentMessage();
				    		_this.store_show = true;
							_this.isshow = false;
							_this.falg = true;
			    		});
		    		}else if(res.data.message=='warning'){
		    			_this.falg = true;
		    			_this.$alert("2",res.data.result);
		    		}else{
		    			_this.falg = true;
		    			_this.$alert("2","添加失败");
		    			console.log(res.data.result)
		    		} 
				})
			}
		},
		getPlatfrom:function(obj){
			if(obj==1){
				return "淘宝";
			}else if(obj==2){
				return "天猫";
			}else if(obj==3){
				return "京东";
			}
		},
		//--------日期格式转换------------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间  
		    return oTime;  
		    function getzf(num){  
			    if(parseInt(num) < 10){  
			        num = '0'+num;  
			    }  
			    return num;  
			}
		},
		getAgentMessage:function(){
			var _this = this;
	    	//----------请求商家信息------------
	    	_this.$axios.post('/agent/info/show',).then(function(res){
	    		if(res.data.message=='succ'){
	    			_this.store_num = res.data.result.houseNum;
		    		_this.max_store_num = res.data.result.allHouseNum;
	    		}else{
	    			console.log(res.data.result)
	    		}   		    	
			})
	    	_this.$axios.post('/agent/house/show',).then(function(res){
			   /* res = JSON.parse(res);*/
			  	if(res.data.message=='succ'){
	    			_this.storeList = res.data.result;
	    		}else{
	    			console.log(res.data.result)
	    		}  
			})
			}
    },
    created:function(){
    	this.getAgentMessage();
    }
}
</script>

<style scoped>
#store{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
.store_title{
	font-size: 16px;
	color: #545454;
	display: flex;
	align-items: center;
	margin-top: 15px;
}
.store_title>span{
	font-size: 14px;
	background-color: #545454;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	color: #FFFFFF;
	display: block;
	text-align: center;
	line-height: 18px;
	margin-right: 5px;
}
.store_title p{
	font-size: 14px;
	color: #808080;
	margin-left: 10px;
	padding-top: 5px;
}
.store_title p span{
	color: #FF464E;
}
/*----------绑定店铺须知---------------*/
.store_1{
	border: 1px solid #E2E2E2;
	background-color: #F5F5F5;
	padding: 15px 20px;
	box-sizing: border-box;
	margin-top: 15px;
}
.store_1 p span{
	color: #FF464E;
}
.store_1 p:first-child{
	margin-bottom: 15px;
}
/*-------已绑店铺----------*/
.store_2{
	width: 100%;
	border-collapse:collapse;
	margin-top: 15px;
}
th,td{
	text-align: center;
    height: 35px;
    word-break: break-all;
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}
th{
	color: #545454;
}
td{
	color: #808080;
}
.store_2 tr{
	border-bottom: 1px solid #E2E2E2;
}
.store_2 tr:first-child{
	border: 1px solid #E2E2E2;
	background-color: #F5F5F5;
}
/*----------绑定新店铺-----------*/
.store_3{
	margin-top: 50px;
}
.store_3 img{
	height: 40px;
	display: block;
	margin: 0 auto;
	cursor: pointer;
}
.store_3 p{
	text-align: center;
	margin-top: 15px;
	color: #808080;
}
.store_3 p span{
	color: #FF464E;
}
/*--------绑定店铺表单----------*/
.store_4_item{
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.store_4_item p{
	font-size: 14px;
	color: #545454;
	width: 120px;
	height: 30px;
	line-height: 30px;
	text-align: right;
}
.type{
	display: flex;
}
.type li{
	width: 110px;
	height: 30px;
	border: 1px solid #b3b3b3;
	color: #b3b3b3;
	text-align: center;
	line-height: 30px;
	margin-right: 10px;
	cursor: pointer;
	box-sizing: border-box;
}
.type li.type_active{
	border: 1px solid #FF8400;
	color: #FF8400;
	background-color: #FDF9F0;
}
.store_4_item input{
	height: 30px;
	width: 300px;
	border: 1px solid #CCCCCC;
	padding-left: 10px;
	box-sizing: border-box;
}
#sub{
	width: 100px;
	height: 30px;
	border-radius: 3px;
	color: #FFFFFF;
	margin-left: 120px;
	margin-top: 20px;
	border: none;
	background: linear-gradient(to right,#F3C665,#FD8E0F);
	font-size: 14px;
	cursor: pointer;
}
input.focus{
	border: 1px solid #FF464E;
}
</style>
